import React, { Component } from 'react'
import { Link } from "react-router-dom";
import {Menu,Layout} from 'antd'
import { PieChartOutlined, UserOutlined} from '@ant-design/icons';
import routers from '../../router'


const { SubMenu } = Menu;
const { Sider } = Layout;
export default class MenuItem extends Component {
    state = { collapsed: false,selectedKeys:[],openkeys:[] };

    onCollapse = collapsed => {
      console.log(collapsed);
      this.setState({ collapsed });
    };

    // 无子级菜单处理
    renderMenu=({title,key})=>{
      return (
        <Menu.Item key={key}>
          <Link to={key}><span>{title}</span></Link>
        </Menu.Item>
      )
    }
    // 有子级菜单处理
    renderSubMenu=({key,title,child})=>{
      return(
        <SubMenu key={key} icon={<UserOutlined />}  title={title}>
        {/* <SubMenu key={key}  title={title}> */}
          {
             child && child.map(item=>{
              return item.child&&item.child.length>0? this.renderSubMenu(item) : this.renderMenu(item)
            })
          }
      </SubMenu>
      )
    }


   

    render() {
    const { collapsed } = this.state;
        return (
            <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
            <div className="logo" style={{display:'flex',alignItems:'center',color:'white',fontSize:'18px'}}>
             <img  src={require('../../assets/img/weather.png').default}  className="image" alt="标题logo" style={{height:'50px',width:'50px',margin:'0 10px',textAlign:'center'}} />
             <span style={{lineHeight:'80px'}}>react管理后台</span>
            </div>

           
            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
              
            {routers&&routers.map(firstItem=>{
                            return firstItem.child&&firstItem.child.length>0 ?this.renderSubMenu(firstItem) : this.renderMenu(firstItem);
                        })}

             
            </Menu>
            </Sider>
        )
    }
}
